<template>
  <div class="color-block">
    <el-row>
      <!-- 生产管理 -->
      <el-col :span="8">
        <el-button class="btn" type="primary" @click="toProductionPage()">
          <i class="i el-icon-setting"></i>
          <div class="pageName">生产管理</div>
        </el-button>
      </el-col>
      <!-- 地图显示 -->
      <el-col :span="8">
        <el-button class="btn" type="success" @click="toMapPage()">
          <i class="i el-icon-place"></i>
          <div class="pageName">地图显示</div>
        </el-button>
      </el-col>
      <!-- 视频监控 -->
      <el-col :span="8">
        <el-button class="btn btn3" type="success" @click="toMonitorPage()">
          <i class="i el-icon-video-camera"></i>
          <div class="pageName">视频监控</div>
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <!-- 户表管理 -->
      <el-col :span="8">
        <el-button class="btn" type="warning" @click="toMeterPage()">
          <i class="i el-icon-odometer"></i>
          <div class="pageName">户表管理</div>
        </el-button>
      </el-col>
      <!-- 异常表数 -->
      <el-col :span="8">
        <el-button class="btn" type="danger" @click="toFaultPage()">
          <i class="i el-icon-warning-outline"></i>
          <div class="pageName">异常数({{faultCount}})</div>
        </el-button>
      </el-col>
      <!-- 设备管理 -->
      <el-col :span="8">
        <el-button class="btn btn6" type="success" @click="toDevicePage()">
          <i class="i el-icon-aim"></i>
          <div class="pageName">设备管理</div>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faultCount: 0
    };
  },
  methods: {
    toProductionPage() {
      window.open("https://hzdl.yunzutai.com/app/main/operationCenter");
    },
    toMapPage() {
      window.open("static/displayOnMap.html");
    },
    toMonitorPage() {
      console.log('Oh,no!');
    },
    toMeterPage() {
      const { href } = this.$router.resolve({
        name: 'meterPage'
      })
      window.open(href, '_blank');
    },
    toFaultPage() {
      console.log('Oh,no!');
    },
    toDevicePage() {
      const { href } = this.$router.resolve({
        name: 'devicePage'
      })
      window.open(href, '_blank');
    }
  }
};
</script>

<style scoped>
/* color-block 色块样式 */
.pageName {
  font-size: 6vh;
  letter-spacing: 2vh;
}
.i {
  padding-left: 3vw;
  float: left;
  font-size: 6vh;
}
.btn {
  width: 33.3vw;
  height: 50vh;
}
.btn3 {
  background: rgb(68, 182, 174);
}
.btn3:hover {
  background: rgb(68, 182, 174, 0.8);
}
.btn6 {
  background: rgb(142, 124, 195);
}
.btn6:hover {
  background: rgb(142, 124, 195, 0.8);
}
</style>